<template>
  <view class="profile-page">
    <!-- 用户信息头部 -->
    <view class="profile-header">
      <view class="user-info">
        <image class="avatar" src="https://via.placeholder.com/120x120/ff6b35/ffffff?text=用户" mode="aspectFill" />
        <view class="user-details">
          <text class="username">{{ userInfo.name }}</text>
          <text class="user-level">{{ userInfo.level }}</text>
        </view>
        <view class="edit-btn" @click="editProfile">
          编辑
        </view>
      </view>
      
      <!-- 统计信息 -->
      <view class="stats-row">
        <view class="stat-item" v-for="stat in userStats" :key="stat.label">
          <text class="stat-number">{{ stat.value }}</text>
          <text class="stat-label">{{ stat.label }}</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-title">我的服务</view>
      <view class="menu-grid">
        <view 
          v-for="menu in menuItems" 
          :key="menu.name"
          class="menu-item"
          @click="handleMenuClick(menu.action)"
        >
          <text class="menu-icon">{{ menu.icon }}</text>
          <text class="menu-name">{{ menu.name }}</text>
          <view class="menu-badge" v-if="menu.badge">{{ menu.badge }}</view>
        </view>
      </view>
    </view>

    <!-- 我的订单 -->
    <view class="order-section">
      <view class="section-header">
        <text class="section-title">我的订单</text>
        <text class="view-all" @click="viewAllOrders">查看全部 ></text>
      </view>
      <view class="order-types">
        <view 
          v-for="type in orderTypes" 
          :key="type.name"
          class="order-type"
          @click="viewOrders(type.status)"
        >
          <text class="order-icon">{{ type.icon }}</text>
          <text class="order-name">{{ type.name }}</text>
          <view class="order-badge" v-if="type.count > 0">{{ type.count }}</view>
        </view>
      </view>
    </view>

    <!-- 其他功能 -->
    <view class="other-section">
      <profile-menu-item 
        v-for="item in otherMenus" 
        :key="item.name"
        :item="item"
        @click="handleOtherMenuClick(item.action)"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import ProfileMenuItem from '../../components/ProfileMenuItem.vue'

// 假数据
const userInfo = ref({
  name: '学习达人',
  level: 'VIP会员',
  avatar: ''
})

const userStats = [
  { label: '关注', value: 128 },
  { label: '粉丝', value: 256 },
  { label: '作品', value: 15 },
  { label: '积分', value: 1580 }
]

const menuItems = [
  { icon: '❤️', name: '我的收藏', action: 'favorites', badge: 12 },
  { icon: '🎬', name: '我的作品', action: 'works', badge: 5 },
  { icon: '🎟️', name: '优惠券', action: 'coupons', badge: 3 },
  { icon: '💰', name: '我的钱包', action: 'wallet' },
  { icon: '🎁', name: '积分商城', action: 'points' },
  { icon: '📞', name: '客服', action: 'service' }
]

const orderTypes = [
  { icon: '📦', name: '待付款', status: 'unpaid', count: 2 },
  { icon: '🚚', name: '待发货', status: 'unshipped', count: 1 },
  { icon: '📋', name: '待收货', status: 'unreceived', count: 0 },
  { icon: '⭐', name: '待评价', status: 'unrated', count: 3 }
]

const otherMenus = [
  { icon: '⚙️', name: '设置', action: 'settings' },
  { icon: '📱', name: '关于我们', action: 'about' },
  { icon: '🆘', name: '帮助中心', action: 'help' }
]

const editProfile = () => {
  uni.showToast({ title: '编辑资料', icon: 'none' })
}

const handleMenuClick = (action) => {
  switch (action) {
    case 'favorites':
      uni.navigateTo({ url: '/pages/FavoritesPage/FavoritesPage' })
      break
    case 'coupons':
      uni.navigateTo({ url: '/pages/CouponsPage/CouponsPage' })
      break
    default:
      uni.showToast({ title: `${action}功能开发中`, icon: 'none' })
  }
}

const viewAllOrders = () => {
  uni.showToast({ title: '查看全部订单', icon: 'none' })
}

const viewOrders = (status) => {
  uni.showToast({ title: `查看${status}订单`, icon: 'none' })
}

const handleOtherMenuClick = (action) => {
  uni.showToast({ title: `${action}功能开发中`, icon: 'none' })
}
</script>

<style scoped>
.profile-page {
  background: #f5f5f5;
  min-height: 100vh;
}
.profile-header {
  background: linear-gradient(135deg, #ff6b35, #ff8c42);
  padding: 40rpx 30rpx;
  color: #fff;
}
.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-right: 30rpx;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
}
.user-details {
  flex: 1;
}
.username {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
}
.user-level {
  font-size: 24rpx;
  opacity: 0.9;
}
.edit-btn {
  padding: 15rpx 30rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 30rpx;
  font-size: 24rpx;
}
.stats-row {
  display: flex;
  justify-content: space-around;
}
.stat-item {
  text-align: center;
}
.stat-number {
  font-size: 32rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}
.stat-label {
  font-size: 22rpx;
  opacity: 0.9;
}
.menu-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}
.menu-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  color: #333;
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30rpx;
}
.menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.menu-icon {
  font-size: 60rpx;
  margin-bottom: 15rpx;
}
.menu-name {
  font-size: 24rpx;
  color: #666;
}
.menu-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #ff4757;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 20rpx;
  min-width: 30rpx;
  text-align: center;
}
.order-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
  padding: 30rpx;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}
.view-all {
  font-size: 24rpx;
  color: #999;
}
.order-types {
  display: flex;
  justify-content: space-around;
}
.order-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.order-icon {
  font-size: 50rpx;
  margin-bottom: 15rpx;
}
.order-name {
  font-size: 22rpx;
  color: #666;
}
.order-badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  background: #ff4757;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 20rpx;
  min-width: 30rpx;
  text-align: center;
}
.other-section {
  margin: 20rpx;
}
</style>
